<script>
export default {
  props: {
    title: {
      type: String,
      default: "Form",
    },
    items: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      // 接收参数时动态给formData赋值
      // formData此时为静态属性
      formData: {

      }
    }
  },
  created() {
    // Vue2底层数据绑定无法监测属性的动态添加和删除, 会造成动态属性在改变过后页面不更新
    this.items.forEach(arr => {
      arr.forEach(item => {
        // 动态添加或删除
        // this.formData[item.key] = item.value
        this.$set(this.formData, item.key, item.value)
      })
    })
  },
  methods: {
    getFormData() {
      console.log(this.formData);
    },
    // 渲染行
    renderRows(items) {
      return items.map((row) => {
        return <el-row>{this.renderColumns(row)}</el-row>;
      });
    },
    // 列渲染
    renderColumns(columns) {
      return columns.map((column) => {
        return (
          <el-col span={column.colspan}>
            <el-form-item label={column.label}>
              {this.renderItem(column)}
            </el-form-item>
          </el-col>
        );
      });
    },
    renderItem(item) {
      switch (item.type) {
        case "input":
          // JSX中无法使用v-model,须使用原生数据绑定 :value + @input
          // 原生属性需要通过attrs传递
          return <el-input attrs={item.attrs} value={this.formData[item.key]} onInput={val=> this.formData[item.key] = val}></el-input>;
        case "select":
          return <el-select value={item.value}>{item.options.map(opt => {
            return <el-option label={opt.label} value={opt.value}></el-option>
          })}</el-select>;
      }
    },
  },
  render() {
    return (
      <div>
        <h2>{this.title}</h2>
        <el-form label-width="80px">{this.renderRows(this.items)}</el-form>
      </div>
    );
  },
};
</script>

<style></style>
